<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品详情</title>
	<link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/product.css">
	<link rel="stylesheet" href="css/carousel.css">
</head>
<body>
	<div id="header">
		<div id="top-nav">
			<div class="wrapper">
				<div id="search-box">
					<span class="glyphicon glyphicon-search"></span>
				</div>
				<div id="top-menu">
					<ul>
						<li class="follow-us">关注我们</li>
						<li class="share"><a href="#"><span class="icon icon-facebook"></span></a></li>
						<li class="share"><a href="#"><span class="icon icon-twitter"></span></a></li>
						<li class="share"><a href="#"><span class="icon icon-youtube"></span></a></li>
						<li class="share"><a href="#"><span class="icon icon-google-plus"></span></a></li>
						<li class="btn login">
							<a href="#">
								<span class="glyphicon glyphicon-lock"></span>
								登录
							</a>
						</li> 
						<li class="btn register">
							<a href="#">
								<span class="glyphicon glyphicon-user"></span> 
								注册
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="nav">
			<div class="wrapper">
				<h1 class="logo">网上商城</h1>
				<ul class="nav-menu">
					<li class="selected"><a href="index.html">首页</a></li>
					<li><a href="about.html">关于我们</a></li>
					<li class="menu-btn">
						<a href="#">商城 <span class="arrow"></span></a>
						<ul class="sub-menu">
							<li><a href="catalog.html">商品类别</a></li>
							<li><a href="product.html">商品详情</a></li>
							<li><a href="shopcart.html">购物车</a></li>
						</ul>
					</li>
					<li class="menu-btn"><a href="#">博客 <span class="arrow"></span></a>
					<ul class="sub-menu">
							<li><a href="posts.html">Blog Posts</a></li>
							<li><a href="timeline.html">Blog Timeline</a></li>
						</ul>
					</li>
					<li><a href="contact.html">联系我们</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="zhan"></div>
	<div id="center" class="wrapper">
		<h2 id="title">
			<span class="glyphicon glyphicon-gift"></span>
			Product name goes here
		</h2>
		<div id="main">
			<div id="main-left">
				<a class="big-img-box">
					<img src="img\fashion\female\1.jpg" alt="" class="big-img">
				</a>
				<div class="hr">
					<span class="glyphicon glyphicon-picture">
					</span>
				</div>
				<ul class="small-imgs">
					<li>
						<a href="#" class="small-img-box">
							<img src="img\fashion\female\1.jpg" alt="图1" class="small-img">
						</a>
					</li>
					<li>
						<a href="#" class="small-img-box">
							<img src="img\fashion\female\2.jpg" alt="图2" class="small-img">
						</a>
					</li>
					<li>
						<a href="#" class="small-img-box">
							<img src="img\fashion\female\3.jpg" alt="图3" class="small-img">
						</a>
					</li>
					<li>
						<a href="#" class="small-img-box">
							<img src="img\fashion\female\4.jpg" alt="图4" class="small-img">
						</a>
					</li>
				</ul>
			</div>
			<div id="main-right">
				<div class="right-top">
					<div class="detail">
						<h3>
							<span class="glyphicon glyphicon-list-alt"></span>
							Product description
						</h3>
						<div class="p-body">
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis porta purus, pulvinar mattis nulla tempus ut. Curabitur quis dui orci. Ut nisi dolor, dignissim a aliquet quis, vulputate id dui. Proin ultrices ultrices ligula.</p><br>
							<p>Dictum varius turpis faucibus non. Curabitur faucibus ultrices nunc, nec aliquet leo tempor cursus. Pellentesque sed felis ipsum.</p>
						</div>
						<h3>
							<span class="glyphicon glyphicon-warning-sign"></span>
							Important note
						</h3>
						<p class="important-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat massa, ultricies sit amet.</p>
					</div>
					<div class="add">
						<span class="off">50% Off</span>
						<h4>$1,000.00</h4>
						<p class="price">$1,119 incl. VAT</p>
						<p class="btn-title">Select size</p>
						<select name="select" id="select-size">
							<option value="1">Option</option>
							<option value="2">Option</option>
							<option value="3">Option</option>
						</select>
						<p class="btn-title">Qty</p>
						<input type="text" value="1">
						<a href="#" class="butten"><span class="glyphicon glyphicon-shopping-cart"></span>
						Add to cart</a>
						<div class="share">
							<span class="txt">Share</span> 
							<a class="icon icon-facebook-sign"></a>
							<a class="icon icon-twitter-sign"></a>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="hr">
					<span class="glyphicon glyphicon-briefcase">
					</span>
				</div>
				<div class="right-bottom" id="right-bottom">
					<ul class="btn-box">
						<li class="active"><span class="glyphicon glyphicon-star"></span>Reviews</li>
						<li><span class="glyphicon glyphicon-blackboard"></span>Delivery</li>
					</ul>
					<div class="content-box">
						<div class="active customer js-box">
							<div class="one-customer">
								<span class="glyphicon glyphicon-fire"></span>
								<h5>Customer name</h5>
								<p class="star">
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star-empty"></span>
									<span class="glyphicon glyphicon-calendar"></span>
									<span>on 22th June, 2013 </span>
								</p>
								<p class="text">Aliquam rutrum, sem at scelerisque tempor, nulla diam pulvinar tortor, id pulvinar massa velit eu purus. Curabitur eu fringilla diam, sed suscipit lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras iaculis enim vel odio imperdiet faucibus. Aliquam erat volutpat.</p>
							</div>
							<div class="one-customer">
								<span class="glyphicon glyphicon-fire"></span>
								<h5>Customer name</h5>
								<p class="star">
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star-empty"></span>
									<span class="glyphicon glyphicon-calendar"></span>
									<span>on 22th June, 2013 </span>
								</p>
								<p class="text">Aliquam rutrum, sem at scelerisque tempor, nulla diam pulvinar tortor, id pulvinar massa velit eu purus. Curabitur eu fringilla diam, sed suscipit lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras iaculis enim vel odio imperdiet faucibus. Aliquam erat volutpat.</p>
							</div>
						</div>
						<div class="js-box">
							<p>
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis porta purus, pulvinar mattis nulla tempus ut. Curabitur quis dui orci. Ut nisi dolor, dignissim a aliquet quis, vulputate id dui. Proin ultrices ultrices ligula, dictum varius turpis faucibus non. Curabitur faucibus ultrices nunc, nec aliquet leo tempor cursus. Pellentesque sed felis ipsum. Quisque in lacus sed ante malesuada condimentum et a risus. Morbi accumsan euismod rutrum. Etiam vitae turpis eu est lacinia condimentum a sit amet erat. Sed augue turpis, lobortis ac feugiat eget, cursus ac justo.
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div id="footer">
		<div class="wrapper">
			<div class="foot-top">
				<div class="quick-links left">
					<h4>QUICK LINKS</h4>
					<ul>
						<li><a>Home</a></li>
						<li><a>About</a></li>
						<li><a>pricing</a></li>
						<li><a>Blog</a></li>
						<li><a>Contact</a></li>
					</ul>
				</div>
				<div class="about left">
					<h4>ABOUT</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting dustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				</div>
				<div class="out-blog left">
					<h4>OUR BLOG</h4>
					<ul>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
					</ul>
				</div>
				<div class="contact right">
					<h4>CONTACT</h4>
					<ul>
						<li><span class="glyphicon glyphicon-phone"></span>01&nbsp230&nbsp1958</li>
						<li><span class="glyphicon glyphicon-envelope"></span>contact@mosaicpro.biz</li>
					</ul>
				</div>
				<div class="social right">
					<h4>SOCIAL</h4>
					<ul>
						<li><a href="#" class="icon icon-facebook-sign selected"></a></li>
						<li><a href="#" class="icon icon-twitter-sign"></a></li>
						<li><a href="#" class="icon icon-linkedin-sign"></a></li>
						<li><a href="#" class="icon icon-google-plus-sign"></a></li>
						<li><a href="#" class="icon icon-edit-sign"></a></li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="copyright">
				<span>© 2013 -</span>
				<a href="#"> mosaicpro.biz</a>
				<span class="text-right">FLAT KIT</span>
			</div>
		</div>
	</div>


	<div class="dialog-box">
		<div class="content">
			<div class="dialog-title">
				<span class="dialog-close">X</span>
			</div>
			<div class="dialog-body">
				<img src="img\fashion\female\1.jpg" alt="">
				<span class="dialog-prev">&lt;</span>
				<span class="dialog-next">&gt;</span>
			</div>
			<div class="dialog-btns">
				<span class="prev-btn">next</span>
				<span class="next-btn">previous</span>
				<span class="slide-btn">slideshow</span>
				<span class="download-btn">download</span>
			</div>
		</div>
	</div>
	<script src="js/style.js"></script>
	<script src="js/product.js"></script>
</body>
</html>